<template>
    <div>
        <nav-com title="订单详情" :showView='showView' @back="backHandler()"></nav-com>
        <van-pull-refresh v-model = 'isLoading' @refresh='onRefresh'>
        
            <div class="d_top">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in list" :key="index">
                        <img v-lazy="image" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="d_price">
                <span><span style="font-size:3.2vw;">￥</span>{{details.originalPrice}}</span>
                <p>【晋升通道】{{details.name}}</p>
                <div class="d_pr_p">升级通道</div>
            </div>
            <div style="height:2.6vw; background:#F4F4F4;"></div>
            <div class="details_title">
                <i></i>
                <span>权益详情</span>
            </div>
            <div class="d_details">
                <div  class="card" v-html='details.body'></div>
            </div>
            
            <div class="d_height"></div>
        </van-pull-refresh>
        <div class="d_bottom">
            <div class="d_display">
                <div @click="pay" class="d_btn">立即购买</div>
            </div>
        </div>
    </div>
</template>
<script>
import navCom from '@/component/nav'
import {getItems} from '@/api/api'
export default {
    name:'odersDetails',
    components:{
        navCom
    },
    data() {
        return {
            detailsId:'',
            showView:true,
            isLoading:false,
            list:[],
            details:{},
            
        }
    },
    created(){
        this.initDatails()
    },
    mounted(){
        
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        onRefresh(){
            this.isLoading = false
        },
        //初始化
        initDatails(){
            this.detailsId = location.href.substring(location.href.indexOf('details/') + 8);
            getItems({id:this.detailsId}).then(res=>{
                this.details = res.data.data
                this.list = res.data.data.picUrlJson.split(',')
            })
            
        },
        //购买
        pay(){
            this.$router.push({name:'pay',params:{id:this.detailsId}})
        },
    }
}
</script>
<style scoped>
.card, img, div,p {margin:0; padding:0; border:none;}
.card >>> img { display: block; width:100%; height:auto; float:left;}
.d_top img {width:100%;}
.d_price {padding-left:4vw; padding-bottom:4vw; margin-top:2.6vw;}
.d_price span {font-size:5.6vw; color:#CB041C;}
.details_title {font-size:4.2vw; width:100%; margin-left:4vw; margin-top:4vw; text-align: left;}
.details_title i {width:1.066vw; height:4vw; background:#F7541C; margin-top:1vw; margin-right:1.3vw; display: block; float:left;}
.details_title span {float:left; display: block;}
.d_pr_p {font-size:2.9vw; color:#999;margin-top:2.6vw;}
.details_img img {width:100%;}
.d_height {height:18.66vw;}
.d_bottom { position:fixed; bottom:0; left:0; right:0; height:18.66vw; background: #fff;; height:18.66vw;}
.d_display {margin:3.3vw; width:auto;}
.d_btn {width:94.66vw;;  height:12vw; line-height:12vw; font-size:4vw; background:#D62F34; border-radius: 6vw; text-align:center; color:#fff;}
</style>